<template >
  <div class="record-tabs-convert">
    <template v-if="list.length === 0">
      <div class="wrap-box">
        <img src="/more.png" alt="图片加载失败">
      </div>
    </template>
    <template v-else>
      <div class="list-box">
        <div class="item" v-for="(v, i) in list" :key="i">
          <div class="item-l">
            <div class="title">{{ v.title }}</div>
            <div class="time">{{ v.time }}</div>
          </div>
          <div class="item-r">
            <div class="price">{{ v.price }}</div>
            <div class="consume">{{ v.consume }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  methods: {}
}
</script>

<style lang="scss" >
.record-tabs-convert {
  width: 100%;
  height: 100%;

  .wrap-box {
    @include center;
    background-color: #fff;

    img {
      width: rem(150);
      height: rem(150);
      margin: 0 auto;
      margin-top: rem(50);
    }
  }

  .list-box {
    background-color: #f6f6f6;
    height: 100%;
    padding-bottom: rem(18);

    .item {
      @include between;
      width: rem(345);
      height: rem(64);
      border-radius: rem(8);
      padding: 0 rem(15);
      box-shadow: rem(0) rem(2) rem(8) rgb(39 6 127 / 10%);
      background-color: #fff;
      margin: 0 auto;
      margin-top: rem(15);

      .item-l {
        color: #6d6d6d;

        .title {
          font-size: rem(16);
          font-weight: bold;
        }

        .time {
          font-size: rem(13);
          margin-top: rem(6);
          white-space: nowrap;
          margin-right: rem(5);
        }
      }

      .item-r {
        font-size: rem(16);
        font-weight: bold;

        .price {
          color: #0162ff;
        }

        .consume {
          color: #000;
          margin-top: rem(6);
          text-align: right;
        }
      }
    }

    .item:nth-child(1) {
      margin-top: 0;
    }
  }
}
</style>
